<template>
	<view id="contentBox">
		<view class="content">
			<view class="addres">
				<view class="addresBox">
					<view class="fa" style="background-color: #00A0E9;">
						发
					</view>
					<view class="top" :class="{'BGCF4F6F9':true}">
						<view class="dizhi" @click="mapMD(0,2)">
							{{addressList[0].address?addressList[0].address:'请选择发货地址'}}
						</view>
						<view class="dizhibo orderMap13" @click="addressMD(0)">
							<view class="heng"></view>地址薄
							<!-- <u-icon name="arrow-right" color="#000000 " size="12"
								style="margin-left:10upx;">
							</u-icon> -->
						</view>
					</view>
				</view>
				<view v-for="(item,index) in addressList" :key="index">
					<view v-if="index>0 && index<addressList.length-1">
						<view class="huan">
							<image src="@/static/order/huan.png" class="image" @click="huanClick(index)"></image>
						</view>
						<view class="addresBox">
							<view class="fa" style="background-color: #1D9C3C ;">
								{{item.addressType==0 ? '发':'卸'}}
							</view>
							<view class="top" :class="{'BGCF4F6F9':true}">
								<view class="dizhi">
									<view class="xiangxi xiangxi" @click.stop="mapMD(index,2)" style="width: 400rpx;" v-if="item.address">
										{{item.address}}
									</view>
									<view class="xiangxi xiangxi" @click.stop="mapMD(index,2)" style="width: 400rpx;" v-else>
										{{item.addressType==0 ?'请选择发货地':'请选择卸货地'}}
									</view>
									<u-icon v-if="addressList.length>2" @click="deletesMD(index)"
										name="close-circle-fill" color="#C2C3C4" size="18"
										style="margin-right: 16upx;" />
								</view>
								<view class="dizhibo orderMap13" @click="addressMD(index)">
									<view class="heng"></view>地址薄
								</view>
							</view>
						</view>
					</view>
					<view v-if="index==addressList.length-1">
						<view class="huan">
							<image src="@/static/order/huan.png" class="image" @click="huanClick(index)"></image>
						</view>
						<view class="addresBox">
							<view class="fa" style="background-color: #5998A6 ;">
								卸
							</view>
							<view class="top" :class="{'BGCF4F6F9':true}">
								<view class="dizhi" @click="mapMD(index,2)">
									{{addressList[index].address?addressList[index].address:'请选择卸货地址'}}
								</view>
								<view class="dizhibo orderMap13" @click="addressMD(index)">
									<view class="heng"></view>地址薄
									<!-- <u-icon name="arrow-right" color="#000000 " size="12"
										style="margin-left:10upx;">
									</u-icon> -->
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="tagBox">
					<view class="addjingdi" @click="addAddressMD('0')">
						<u-icon name="plus-circle" color="#929292" size="16" style="margin-right:10upx;"></u-icon>添加发货地
					</view>
					<view class="addjingdi" @click="addAddressMD('1')">
						<u-icon name="plus-circle" color="#929292" size="16" style="margin-right:10upx;"></u-icon>添加目的地
					</view>
					<view class="addjingdi" @click="inCommonUse()">
						<u-icon name="map" color="#929292" size="16" style="margin-right:10upx;"></u-icon>常用路线
					</view>
				</view>
				<view class="jianjiexin">
					<view class="time">
						<image src="@/static/order/time.png" class="image"></image>
						7×24小时
					</view>
					<view class="time">
						<image src="@/static/order/anquan.png" class="image"></image>
						司机实名认证
					</view>
					<view class="time">
						<image src="@/static/order/kuaishu.png" class="image"></image>
						快速接单
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import indexTop from  '@/pages/index/components/indexTop.vue'
	export default {
		data() {
			return {
				showPoup: false,
				columns: [],

			}
		},


		
		methods: {
			pickerShow() {
				this.$refs.ChPicker.show();
			},
			confirmTime(e) {
				console.log(e)
				this.navtabMD(e)
				this.$refs.ChPicker.hide()
			},
			...mapMutations('order', ['deleteAddress', 'addAddressList',
			 'setAddressList', 'exchangeAddressList','TianjiaAddress'
			]),
		
			//添加地址
			addAddressMD(e) {
				this.addAddressList({
					name: "",
					address: "",
					contact: "",
					phone: "",
					addressType: e,
					lat: "",
					lng: "",
					detail: "",
					addsort:this.addressList.length
				});
				
			},
			//删除地址
			deletesMD(index) {
				this.deleteAddress(index)
				
			},
			//地址薄
			addressMD(index) {
				this.index = index
				uni.navigateTo({
					url: '/subPackages/order/addressBook/addressBook?index=' + index,
					success() {
						uni.setStorageSync("index", index);
					}
				})
			},
			//添加地址
			mapMD(index, name) {
				uni.navigateTo({
					url: '/subPackages/order/searchMap/searchMap?index=' + index,
					success() {
						uni.setStorageSync("nameIndex", index);
					}
				})
			},
			//交换地址
			huanClick(key) {
				this.exchangeAddressList(key)
			},
			inCommonUse() {
				uni.navigateTo({
					url: '/subPackages/home/Commonly/Commonly?cont=1',
				})
			},
			//获取当前地址经纬度
			getLocation() {
		
			},
			//立即用车
			navtabMD(e) {
			},
		},
		onShow() {
			// console.log(this.$httpder)
			this.getLocation()
			if (uni.getStorageSync("addressList")) {
				this.TianjiaAddress(JSON.parse(uni.getStorageSync("addressList")))
			}
			if (this.addressList[1].address) {
				this.amount = 5000
			}
			
		},
		watch: {
			addressList(val) {
				let tag = true
				val.forEach(item => {
					if (!item.name || !item.address || !item.lat || !item.lng) {
						tag = false
					}
				})
				deep: true
			}
		},
		computed: {
			...mapState({
				addressList: state => state.order.addressList,
			})
		},
		components:{
			indexTop
		}
	}
</script>

<style lang="scss" scoped>
	$borderR: 12upx;
	$bg: #F7F9FB;

	#contentBox {
		background-color: $bg;
		width: 100%;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		overflow: scroll;
		margin-top: -40rpx;
		.content {
			box-sizing: border-box;
			padding: 20upx;
			.addres {
				border-radius: $borderR;
				background-color: #fff;
				box-sizing: border-box;
				padding: 40upx 30upx;

				.addresBox {
					display: flex;
					align-items: center;

					.fa {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24upx;
						width: 40upx;
						height: 40upx;
						border-radius: 50%;
						color: #fff;
						margin-right: 20upx;

					}

					.BGCF4F6F9 {
						background-color: #F4F6F9;
					}

					.top {
						padding: 30upx 20upx;
						box-sizing: border-box;
						border-radius: 16upx;
						flex: 1;
						font-family: PingFang SC-Bold;
						display: flex;
						align-items: center;


						.dizhi {
							font-size: 30upx;
							font-weight: 600;
							display: flex;
							flex: 1;
							align-items: center;

							.xiangxi {
								flex: 1;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
							}
						}

						.dizhibo {
							font-size: 26upx;
							// width: 125upx;
							display: flex;
							align-items: center;

							.heng {
								height: 22upx;
								border-left: 2upx solid #E7E7E8;
								margin-right: 16upx;
							}
						}
					}
				}

				.huan {
					margin: 10upx 0upx;

					.image {
						width: 40upx;
						height: 40upx;
					}
				}

				.jianjiexin {
					margin-top: 40upx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					justify-content: space-between;
					font-size: 24upx;

					.image {
						width: 32upx;
						height: 32upx;
						margin-right: 10upx;
					}


					.time {
						color: #8791A8;
						display: flex;
					}
				}

				.tagBox {
					margin-top: 50upx;
					display: flex;
					align-items: center;

					.addjingdi {
						box-sizing: border-box;
						display: flex;
						align-items: center;
						font-size: 26upx;
						color: #000000;
						padding: 14upx 20upx 14upx 10upx;
						background-color: #F4F6F9;
						border-radius: 16upx;
						font-weight: 500;
						margin-right: 20upx;
					}
				}


			}

			.payBox {
				margin-top: 20upx;
				border-radius: $borderR;
				box-sizing: border-box;
				padding: 40upx 20upx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				// align-content: center;
				align-items: center;

				.amountBox {
					display: flex;


					.amount {
						font-size: 42upx;
						font-weight: 600;
					}

					.danwei {
						margin-top: 16upx;
						margin-bottom: 10upx;
						margin-left: 20upx;
						font-size: 24upx;
						display: flex;
					}
				}

				.jiesuanBT {
					margin-top: 40upx;
					width: 100%;
					display: flex;
					color: #fff;
					font-size: 28upx;

					view {
						padding: 30upx 0upx;
						border-radius: 8upx;
					}

					.liji {
						text-align: center;
						flex: 1;
						background-color: #00A0E9;
					}

					.yuyue {
						margin-left: 40upx;
						text-align: center;
						width: 240upx;
						background-color: #5998A6;
					}
				}
			}

			.informationBox {
				margin-top: 20upx;
				border-radius: $borderR;
				width: 100%;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0upx 30upx;

				.information {
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					border-bottom: 2upx solid $bg;
					height: 100upx;

					.left {
						display: flex;
						align-items: center;
						font-size: 28upx;
						color: #000000;
						font-weight: 600;

						.textimg {
							display: flex;
							align-items: center;
						}

						.jiezhang {
							color: #FF9200;
							border-radius: 8upx;
							border: 2upx solid #FF9200;
							padding: 4upx 8upx;
							margin-left: 10upx;
						}
					}

					.right {
						font-size: 28upx;
					}

					.kaitong {
						color: #fff;
						background-color: #00A0E9;
						padding: 16upx 40upx;
						border-radius: 25px;
						font-size: 24upx;
					}

					.renzheng {
						color: #00A0E9;
						display: flex;
					}
				}
			}
		}
	}
</style>